<template>
    <!--banner轮播-->
    <div class="swiper-container" id="mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(carousel, index) in banner" :key="index">
                <img :src="carousel.image"/>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>

import Swiper from "swiper/bundle";

export default {
    name: "SwiperPage",
    des: "轮播图",
    data() {
        return {
            banner: [
                {
                    "id": 2,
                    "image": require('@/assets/rotation/banner2.jpg')
                },
                {
                    "id": 4,
                    "image": require('@/assets/rotation/banner4.jpg')
                }
            ]
        }
    },
    mounted() {
        // this.$store.dispatch('getBannerList')  //派发action：通知Vuex发起ajax请求，将数据存储在仓库中
    },
    computed: {
        // ...mapState({
        //     banner: state => this.banner
        // })
    },
    watch: {
        banner: {
            handler(newBanner, oldBanner) {
                //只能监听到轮播图数据已经有了，但是v-for动态渲染结构我们还是没有办法确定的，因此还是需要用nextTick
                //nextTick:  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
                this.$nextTick(() => {
                    const mySwiper = new Swiper('.swiper-container', {
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            //点击小球的时候也切换图片
                            clickable: true,
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        // 如果需要滚动条
                        scrollbar: {
                            el: '.swiper-scrollbar',
                        },
                    });
                })
            },
            //立即监听：不管你数据有没有变化，我上来立即监听一次
            immediate: true,
        }
    }
}
</script>

<style scoped>

#mySwiper {
    margin: 10px 17.8% 0 17.8%;
}

</style>
